<template>
  <div class="tteesstt">
    <input type="text" ref="input1">
    <input type="text" ref="input2">
    <input type="password" ref="input3">
  </div>
</template>

<script>
import CheckInput from '@/utils/CheckInput.js'
import Utils from '@/utils/Utils.js'

export default {
  data () {
    return {

    }
  },
  methods: {

  },
  mounted () {
    let checkList = new CheckInput({
      rules: {
        required (val) {
          return !!val.length
        },
        onlyNumber: /^\d*$/
      },
      list: [
        {
          id: 'input1',
          input: this.$refs.input1,
          rules: [
            {
              rule (val) {
                let p = Utils.makePromise()
                setTimeout(() => {
                  if (val !== '1') {
                    p.resolveHandle(true)
                  } else {
                    p.rejectHandle(false)
                  }
                }, 2000)
                return p
              },
              msg: 'input1不能是1'
            },
            {
              rule: 'required',
              msg: 'input1不能空'
            },
            {
              rule (val) {
                return val !== '3'
              },
              msg: 'input1不能是3'
            }
          ],
          checkOn: [
            'blur'
          ],
          onchecked (info) {
            // console.log('查看input1', info)
          }
        },

        {
          id: 'input2',
          input: this.$refs.input2,
          rules: [
            {
              rule: 'required',
              msg: 'input2不能为空'
            },
            {
              rule (val) {
                return /^\d{2,}$/.test(val)
              },
              msg: 'input2请输入两位以上数字'
            }
          ],
          checkOn: [
            'blur'
          ],
          preCheckIds: [
            // 'input1'
          ],
          onchecked (info) {
            // console.log('查看input2结果', info)
          }
        },

        {
          id: 'input3',
          input: this.$refs.input3,
          rules: [
            {
              rule: 'required',
              msg: 'input3不能为空'
            }
          ],
          checkOn: [
            'blur'
          ],
          preCheckIds: [
            'input1',
            'input2'
          ],
          onchecked (info) {
            // console.log('查看input3结果', info)
          }
        }

      ]
    })
    // console.log(checkList)
    checkList.checkAll()
  }
}
</script>

<style lang="less">
.tteesstt {
  input {
    border: 1px solid #000;
  }
}
</style>
